@import '../../../../scss/colors.scss';
.bug-detail{
    width: 100%;
    margin:30px auto;
    max-width: 1595px;
    position: relative;
    padding-right:390px;
    &-right{
        position: absolute;
        right: 0;
        top: 0;
        width: 360px;
        &-box{
            margin-bottom: 30px;
            &-head{
                height:64px;
                padding-left:15px;
                background:linear-gradient(0deg,rgba(243,243,243,1),rgba(255,255,255,1));
                span{
                    height: 20px;
                    line-height: 20px;
                    margin-top: 22px;
                    font-size: 18px;
                    font-weight: bold;
                    border-left: 2px solid $primary-color;
                    padding-left: 15px;
                    display: inline-block;
                }
            }
            &-body{
                padding:20px 30px;
                background: #fff;
                .status-box{
                    &-item{
                        padding-left:45px;
                        padding-bottom: 28px;
                        padding-top:28px;
                        position: relative;
                        &:before{
                            content: '';
                            height: 43px;
                            width: 2px;
                            background: #EEEEEE;
                            position: absolute;
                            left: 9px;
                            top: 0;
                        }
                        &:after{
                            content: '';
                            height: 43px;
                            width: 2px;
                            background: #EEEEEE;
                            position: absolute;
                            left: 9px;
                            bottom: 0;
                        }
                        .icon{
                            position: absolute;
                            left: 0;
                            top: 50%;
                            transform: translateY(-50%);
                            display: block;
                            width: 20px;
                            height: 20px;
                            background:url(../../../../assets/img/bugDetail/unchecked.png) center center no-repeat;
                        }
                        &:first-child{
                            padding-top: 0;
                            .icon{
                                top:25px;
                            }
                            &:before{
                                display: none;
                            }
                        }
                        &:last-child{
                            padding-bottom: 0;
                            .icon{
                                transform: translateY(50%);
                                top: auto;
                                bottom: 25px;
                            }
                            &:after{
                                display: none;
                            }
                        }
                        &.checked{
                            &:after{
                                background: $primary-color;
                            }
                            &:before{
                                background: $primary-color;
                            }
                            .icon{
                                background: url(../../../../assets/img/bugDetail/checked.png) center center no-repeat;
                            }
                        }
                        h3{
                            font-size: 18px;
                            color: #333;
                            line-height: 26px;
                            font-weight: bold;
                            margin:0;
                        }
                        p{
                            font-size: 14px;
                            color: #999999;
                            line-height: 24px;
                            margin:0;
                        }
                    }
                }
            }
        }
    }
    &-left{
        width: 100%;
        background-color: #fff;
        padding:0px;
        &-top{
            height: 150px;
            background:#072A3D;
            padding:30px;
            h3{
                font-size:30px;
                line-height: 30px;
                font-weight:bold;
                color:rgba(255,255,255,1);
                margin-bottom: 15px;
            }
            p{
                font-size:16px;
                color:#fff;
                span{
                    margin-right: 40px;
                    font{
                        color:#83959e;
                    }
                }
            }
        }
        &-bottom{
            padding:30px;
            >h3{
                font-size:24px;
                color:#333;
                line-height: 20px;
                border-left:2px solid $primary-color;
                padding-left: 10px;
                font-weight: bold;
            }
        }
    }
    &-content{
        &-title{
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            .icon{
                width: 60px;
                margin-right: 10px;
                position: relative;
                flex-shrink: 0;
                img{
                    position: absolute;
                    left: 50%;
                    top: 0;
                    transform: translateX(-50%);
                }
            }
            .title{
                font-size: 18px;
                flex-grow: 1;
                padding-right:20px;
                span{
                    color: $primary-color;
                }
                a{
                    &.high{
                        color:#FF4545;
                    }
                }
            }
            .time{
                width: 160px;
                flex-shrink: 0;
                line-height: 26px;
            }
        }
        &-box{
            padding-left: 70px;
            position: relative;
            padding-bottom:20px;
            &:before{
                content: '';
                height: 100%;
                left: 29px;
                width: 2px;
                background: #EEEEEE;
                position: absolute;
                top: 0;
            }
            dl{
                dt{
                    font-size: 18px;
                    line-height: 34px;
                }
                dd{
                    background: #F5F5F5;
                    padding:8px 10px;
                    
                    &.html-box{
                        max-height: 200px;
                        position: relative;
                        overflow: hidden;
                        .more{
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            width: 100%;
                            height: 30px;
                            line-height: 30px;
                            background: #f5f5f5;
                            margin:0;
                            padding-left: 10px;
                        }
                        &.all{
                            max-height: max-content;
                            padding-bottom:30px;
                        }
                    }
                    
                }
            }
        }
    }
}